<template>
  <div>
    <a-card title="订单管理" style="width: 100%">
      <div slot="extra" class="add-box">
        <a-input-search
          placeholder="输入关键词"
          enter-button
          @search="onSearch"
          class="search"
        />
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        :row-key="(record) => record.user_id"
        :pagination="pagination"
        @change="change"
      >
        <div slot="img" slot-scope="row" >
          <img :src="row.goodImg" alt="" class="good-img" />
        </div>
        <div slot="btn" slot-scope="row" class="btn-box">
          <a-button
            type="primary"
            @click="edit(row)"
            :disabled="userState <= 2 ? false : true"
          >
            修改
          </a-button>
          <a-button
            type="danger"
            @click="ship(row.order_id)"
            :disabled="userState <= 2 ? false : true"
          >
            确认发货
          </a-button>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: "order_id",
    title: "订单号",
  },
  {
    dataIndex: "goodName",
    title: "商品名",
  },
  {
    title: "商品图片",
    scopedSlots: { customRender: "img" },
  },
  {
    dataIndex: "goodNum",
    title: "购买数量",
  },
  {
    dataIndex: "address",
    title: "地址",
  },
  {
    dataIndex: "order_state",
    title: "订单状态",
  },
  {
    dataIndex: "timeOut",
    title: "购买时间",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "btn" },
  },
];
import { GetOrder,ShipOrder } from '../../network/order'
export default {
  data() {
    return {
      current: 1,
      data:[],
      pagination: {
        pageSize: 5,
        current: 1,
        total: 0,
      },
      columns,
      keyword:''
    };
    
  },
  created() {
    this.getTableData(this.keyword);
    this.userState = this.$store.state.state;
  },
  methods:{
    getTableData() {
      GetOrder().then((res) => {
          // this.pagination.total = Number(res.data.totalSize);
          this.data = res.data.data;
          console.log(this.data);
      });
    },
    add() {
      this.addVisible = true;
    },
    edit(data){
      console.log(data);
    },
    ship(id){
      console.log(id);
      ShipOrder({order_id:id}).then((res)=>{
        console.log(res);
        this.getTableData(this.keyword);
      })
    },
    onSearch(e) {
      // console.log();
      this.getTableData(e);
    },
    change(e) {
      // this.getData();
      this.pagination.current = e.current;
    },
  }
};
</script>

<style scoped>
.good-img{
  height: 50px;
}
</style>